<template>
  <view class="container">
    <!-- 弹出层 -->
    <view class="popup-mask" v-if="showPopup" @click="closePopup"></view>
    <view class="popup-container" v-if="showPopup" :class="{ 'show': showPopup, 'hide': !showPopup }">
      <image class="popup-image" src="/static/image.png"></image>
      <view class="close-button" @click="closePopup"></view>
    </view>

    <view class="hero">
      <image class="hero-image" src="/static/home/hero.png"></image>
      <view class="hero-content">
        <view class="hero-title">专业小程序开发服务</view>
        <view class="hero-subtitle">为您提供定制化的移动应用解决方案</view>
        <view class="hero-buttons">
          <view class="button primary" @click="navigateToServices">了解服务</view>
          <view class="button secondary" @click="navigateToContact">立即咨询</view>
        </view>
      </view>
    </view>

    <view class="features">
      <view class="feature-item" v-for="(feature, index) in features" :key="index">
        <image class="feature-icon" :src="feature.icon"></image>
        <view class="feature-title">{{feature.title}}</view>
        <view class="feature-description">{{feature.description}}</view>
      </view>
    </view>

    <view class="projects-preview">
      <view class="section-title">精选案例</view>
      <view class="project-list">
        <view class="project-item" v-for="(project, index) in projects" :key="index">
          <image class="project-image" :src="project.image"></image>
          <view class="project-title">{{project.title}}</view>
          <view class="project-category">{{project.category}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showPopup: false,
        features: [
          {
            title: "小程序开发",
            description: "定制开发各种类型的微信小程序，满足您的业务需求。",
            icon: "/static/home/feature1.webp"
          },
          {
            title: "Web应用开发",
            description: "开发响应式网站和Web应用，适配各种设备。",
            icon: "/static/home/feature2.webp"
          },
          {
            title: "需求定制",
            description: "根据您的具体需求，提供个性化的解决方案。",
            icon: "/static/home/feature3.webp"
          },
		  {
		    title: "快速部署",
		    description: "交付快,一站式运维服务。",
		    icon: "/static/home/feature4.webp"
		  }
        ],
        projects: [
          {
            title: "电商小程序",
            category: "电商类",
            image: "/static/home/project1.webp"
          },
          {
            title: "企业官网",
            category: "展示类",
            image: "/static/home/project2.webp"
          },
          {
            title: "在线教育平台",
            category: "教育类",
            image: "/static/home/project3.webp"
          }
        ]
      }
    },
    onLoad() {

    },
    watch: {}, // 移除不必要的watch监听器，动画会通过CSS类自动触发
    methods: {
      navigateToServices() {
        uni.navigateTo({
          url: '/pages/services/services'
        })
      },
      navigateToContact() {
        console.log('显示弹窗');
        this.showPopup = true;
      },
      closePopup() {
        console.log('关闭弹窗');
        this.showPopup = false;
      }
    }
  }
</script>

<style scoped>
  .container {
    padding: 0;
    box-sizing: border-box;
  }

  .hero {
    position: relative;
    height: 500rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
  }

  .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .hero-content {
    padding: 0 40rpx;
  }

  .hero-title {
    font-size: 48rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .hero-subtitle {
    font-size: 32rpx;
    margin-bottom: 40rpx;
  }

  .hero-buttons {
    display: flex;
    justify-content: center;
  }

  .button {
    padding: 15rpx 40rpx;
    border-radius: 50rpx;
    font-size: 30rpx;
    margin: 0 20rpx;
  }

  .primary {
    background-color: #007AFF;
    color: white;
  }

  .secondary {
    background-color: white;
    color: #007AFF;
  }

  .features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 40rpx 20rpx;
    background-color: #f9f9f9;
  }

  .feature-item {
    width: 280rpx;
    margin-bottom: 40rpx;
    text-align: center;
  }

  .feature-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
  }

  .feature-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .feature-description {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
  }

  .projects-preview {
    padding: 40rpx 20rpx;
  }

  .section-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    text-align: center;
  }

  .project-list {
    display: flex;
    overflow-x: scroll;
    padding-bottom: 20rpx;
  }

  .project-item {
    width: 280rpx;
    margin-right: 30rpx;
    flex-shrink: 0;
  }

  .project-image {
    width: 100%;
    height: 200rpx;
    border-radius: 10rpx;
    margin-bottom: 10rpx;
  }

  .project-title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 5rpx;
  }

  .project-category {
    font-size: 26rpx;
    color: #666;
  }

  /* 弹出层样式 */
  .popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }

  .popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 1000;
    padding: 20rpx;
    background-color: white;
    border-radius: 10rpx;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .popup-container.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  .popup-container.hide {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }

  /* .popup-image {
    width: 800rpx;
    max-height: 1000rpx;
    border-radius: 10rpx;
    object-fit: contain;
  } */

  .close-button {
    position: absolute;
    top: -30rpx;
    right: -30rpx;
    width: 60rpx;
    height: 60rpx;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36rpx;
  }

  .close-button::after {
    content: '×';
    font-size: 40rpx;
    color: white;
  }
</style>
